<template>
	<view class="page" :style="{paddingTop: `${topHeight}px`}" style="height: 95vh;background-color: #f2f1f6;">
		<view class="header">
			<view class="h-l">
			</view>
			<view class="h-c">
			</view>
			<view class="h-r">
				<uni-icons type="closeempty" size="26" @click="handleClose"></uni-icons>
			</view>
		</view>
		<view class="content">
			<view class="left-card">
				<view class="card">
					<view style="display: flex;flex-direction: column;" @click="handleCreate">
						<uni-icons type="chatboxes" size="30"></uni-icons>
						<text style="margin-top: 5rpx;">发起群聊</text>
					</view>
				</view>
				<view style="display: flex;flex-direction: row;justify-content: space-between;">
					<view class="card-item">
						<uni-icons type="personadd" size="28" color="#909399"></uni-icons>
						<text style="margin-top: 5rpx;">添加好友</text>
					</view>
					<view class="card-item">
						<uni-icons type="staff" size="30" color="#909399"></uni-icons>
						<text style="margin-top: 5rpx;">创建团队</text>
					</view>
				</view>
			</view>
			<view class="right-card">
				<view class="card">
					<view class="card-scan" @click="handleScancode">
						<uni-icons type="scan" size="30"></uni-icons>
						<text style="margin-top: 5rpx;">扫一扫</text>
					</view>
					<view class="worklog">
						<view style="display: flex;flex-direction: column;" @click="writeLog">
							<uni-icons type="compose" size="28"></uni-icons>
							<text style="margin-top: 8rpx;">写日志</text>
						</view>
						<view style="display: flex;flex-direction: column;" @click="waterCamera">
							<uni-icons type="camera" size="30"></uni-icons>
							<text style="margin-top: 5rpx;">水印相机</text>
						</view>
					</view>
				</view>
			</view>
			
			<view style="position: absolute;bottom: 30rpx;width: 94vw; text-align: center;">
				<button size="mini" @click="handleClose"><text style="color: #909399;">返回弹窗</text></button>
			</view>
		</view>
	</view>
</template>

<script>
	var _this;
	import { getCurrentInstance} from "vue";
	export default {
		data() {
			return {
				topHeight: 0,
				userInfo:{},
				imInfo:{},
			}
		},
		created() {
			_this = this;
			let app = uni.getSystemInfoSync();
			_this.topHeight = app.statusBarHeight;
			
			const instance = getCurrentInstance().proxy;
			const eventChannel = instance.getOpenerEventChannel(); 
			eventChannel.on('moreParams', async function(data) {
				//console.log("more=====", data)
				_this.userInfo = data.userInfo;
				_this.imInfo = data.imInfo;
			});
		},
		methods: {
			handleClose() {
				uni.navigateBack({ delta: 1 });
			},
			//扫一扫
			handleScancode() {
				uni.scanCode({
					onlyFromCamera: true,
					success: function (res) {
						if(res.result == 'green-cloud-camera') {
							//跳转水印相机
							uni.reLaunch({
								url: "/pages/watermarkCamera/index"
							})
						} else if(res.result == 'green-cloud-worklog') {
							//跳转写日志
							uni.reLaunch({
								url: "/pages/worklog/index?jumpTo=写日志"
							})
						} else {
							uni.$u.toast('小心点，别乱扫！');
						}
					},
					fail: function(err) {
						console.error('扫描失败:', err);
					}
				});
			},
			// 创建群聊
			handleCreate() {
				// this.bubbleShow = !this.bubbleShow;
				// this.$refs.createGroup.open();
				uni.navigateTo({
					url: '/pages/chat/list/CreateGroup',
					success: function (res) {
						res.eventChannel.emit('ChatList', JSON.stringify({
							uid:_this.imInfo.id,
							userInfo:_this.userInfo,
						}))
				  },
				})
			},
			//写日志
			writeLog() {
				uni.navigateTo({
					url:'/pages/worklog/index?jumpTo=写日志',
				})
			},
			//水印相机
			waterCamera() {
				// #ifdef APP-PLUS
				uni.navigateTo({
					url: "/pages/watermarkCamera/home"
				});
				// #endif
				// #ifdef H5
				uni.navigateTo({
					url: "/components/watermarkCamera/h5camera"
				});
				// #endif
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	page {
		padding-bottom: 50rpx;
		overflow: hidden;
	}
	.header {
		position: relative;
		z-index: 9999;
		padding: 20rpx 22rpx;
		display: flex;
		align-items: center;
		.h-l {
			width: 30%;
			display: flex;
			flex-direction: row;
			gap: 20rpx;
		}
		.h-c {
			width: 40%;
			text-align: center;
		}
		.h-r {
			width: 30%;
			display: flex;
			justify-content: flex-end;
		}
	}
	.content {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 20rpx;
		font-size: 26rpx;
		color: #909399;
		.left-card {
			width: 50vw;
			padding: 10rpx;
		}
		.right-card {
			width: 50vw;
			margin: 10rpx;
		}
		.card {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 20rpx; 
			margin-bottom: 20rpx;
			text-align: center;
		}
		.card-scan {
			display: flex;
			flex-direction: column;
			border-radius: 20rpx;
			background: linear-gradient(to right, #eff2f9, #f8f9fb);
			padding: 20rpx;
			margin-bottom: 20rpx;
		}
		.worklog {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 10rpx 20rpx;
		}
		.card-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 30rpx 0; 
			border-radius: 20rpx; 
			background-color: #fff;
			width: 21vw;
		}
	}
</style>
